<template>
  <div>
    <data-table :head="thead4" :data="mileage" :page='currentPage2' :operate="mloptions" @callback="mlrmanipulate"
                :actions="['edit','del']"
                class="intendance-table"></data-table>
    <i class="el-icon-circle-plus-outline add-icon" @click="addmileage"></i>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page.sync="currentPage2" layout="total,prev, pager, next, jumper"
                   :total="totalnum3" background>
    </el-pagination>

    <!-- 巡航里程 -->
    <el-dialog title="" :visible.sync="mileagedialog" :detail="detail" width="800px" append-to-body>
        <span>
            <h2 class="titleblue">{{mltitle}}</h2>
            <div class="contant type-div">
                <el-form ref="form" :model="mileageForm" label-width="130px">
                    <el-form-item label="执法载体所属机构">
                        <el-select v-model="mileageForm.org" placeholder="海事处" @change="dpChange($event)"
                                   class="_select-width-200">
                            <el-option v-for="item in organiza" :key="item.id" :label="item.name"
                                       :value="item.id">
                            </el-option>
                        </el-select>
                        <el-select v-model="mileageForm.dept" v-if="dpoptions != null && dpoptions.length != 0"
                                   placeholder="执法大队"
                                   class="_select-width-200">
                            <el-option v-for="item in dpoptions" :key="item.id" :label="item.name"
                                       :value="item.id">
                            </el-option>
                        </el-select>

                    </el-form-item>
                    <el-form-item label="执法载体">
                        <el-input v-model="mileageForm.shipName" class="select-width-220"></el-input>
                    </el-form-item>
                    <el-form-item label="巡航开始时间">
                        <el-date-picker v-model="mileageForm.startTime" class="select-width-220" type="datetime"
                                        value-format="yyyy-MM-dd" placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="巡航结束时间">
                        <el-date-picker v-model="mileageForm.endTime" class="select-width-220" type="datetime"
                                        value-format="yyyy-MM-dd" placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="巡航里程(海里)">
                        <el-input v-model="mileageForm.length" class="select-width-220"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </span>
      <el-row :gutter="24" class="footerbtn">
        <el-button class="sure" @click="surebtn">添加</el-button>
        <el-button class="cancel" @click="mileagedialog=false">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import DataTable from '@/components/common/DataTable.vue'
  import cruiseService from '@/services/CruiseService.js'

  export default {
    props: ['mileage', 'organiza', 'totalnum3'],
    name: 'CruisingMileage',
    components: {
      'data-table': DataTable
    },
    data () {
      return {
        thead4: [
          {
            name: '执法载体所属机构',
            prop: 'name'
          },
          {
            name: '执法载体',
            prop: 'shipName'
          },
          {
            name: '巡航开始时间',
            prop: 'startTime'
          },
          {
            name: '巡航结束时间',
            prop: 'endTime'
          },
          {
            name: '巡航里程',
            prop: 'length'
          }
        ],
        mloptions: [
          {
            name: '编辑',
            prop: 'edit'
          }, {
            name: '删除',
            prop: 'super'
          }],
        tableData4: [],
        ztoptions: [],
        dpoptions: [],
        currentPage2: 1,
        totalPage3: 1,
        detail: '',
        mileagedialog: false,
        mileageForm: {
          org: '',
          dept: '',
          endTime: '', // 巡航结束时间 ,
          length: '', // 巡航里程(KM) ,
          organiza: '', // 组织机构 ,
          shipName: '', // 执法载体 ,
          startTime: '', // 巡航开始时间 ,
        },
        mltitle: '添加巡航里程',
        createTime: null,
        detailId: null
      }
    },
    mounted () {
    },
    methods: {
      showDetail (data) {

        this.mileageForm.endTime = data.endTime
        this.mileageForm.startTime = data.startTime
        this.mileageForm.shipName = data.shipName
        this.mileageForm.organiza = data.organiza
        this.mileageForm.length = data.length
        this.detailId = data.id
        this.createTime = data.createTime
        if (data.organiza.level == 2) {
          this.mileageForm.dept = data.organiza.id
          this.mileageForm.org = data.organiza.parentId
          this.organiza.forEach(item => {
            if (item.id == data.organiza.parentId) {
              this.dpoptions = item.sub
            }
          })
        } else {
          this.mileageForm.org = data.organiza.id
        }
      },
      addmileage () {
        this.mileageForm.shipName = ''
        this.mileageForm.startTime = ''
        this.mileageForm.endTime = ''
        this.mileageForm.length = ''
        this.mileageForm.org = ''
        this.mileageForm.dept = ''

        this.ddid = ''
        this.mltitle = '添加巡航里程'
        this.mileagedialog = true
      },
      handleSizeChange (val) {
        this.parent.getData(val-1)
      },
      handleCurrentChange (val) {
        this.parent.getData(val-1)
      },
      mlrmanipulate (param) {
        if (param.action == 'edit') {
          // this.ddid = item.d_id
          this.mileagedialog = true
          this.showDetail(param.data)
          this.mltitle = '编辑巡航里程'
        } else if (param.action == 'del') {
          cruiseService.delete(param.data.id).then(res => {

            this.$emit('update')
            this.mileagedialog = false
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          })
        }
      },
      dpChange (event) {
        this.mileageForm.dept = ''
        this.dpoptions = []

        this.organiza.forEach(item => {
          if (item.id == event) {
            this.dpoptions = item.sub
          }
        })
      },
      surebtn () {
        var oid = ''
        if (this.mileageForm.dept != '') {
          oid = this.mileageForm.dept
        } else {
          oid = this.mileageForm.org
        }
        if (!this.mileageForm.org) {
          this.$alert('请选择执法载体所属机构')
          return false
        }
        if (!this.mileageForm.shipName) {
          this.$alert('请输入执法载体名称')
          return false
        }
        if (!this.mileageForm.length) {
          this.$alert('请输入巡航里程')
          return false
        }
        let obj = {
          endTime: this.mileageForm.endTime,
          length: this.mileageForm.length,
          organiza: {id: oid}, // 组织机构 ,
          shipName: this.mileageForm.shipName,
          startTime: this.mileageForm.startTime,
        }
        if (this.mltitle == '添加巡航里程') {
          cruiseService.create(obj).then(res => {

            this.$emit('update')
            this.mileagedialog = false
            this.$message({
              type: 'success',
              message: '创建成功'
            })
          })
        } else {
          obj.id = this.detailId
          obj.createTime = this.createTime
          cruiseService.update(obj).then(res => {

            this.$emit('update')
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.mileagedialog = false
          })
        }
      },
    }
  }
</script>

<style scoped lang="scss" src="../Dcustom.scss"></style>
